<template>
  <el-container>
    <el-header height="60px" class="header">
      <div class="logo">
        <img src="@/assets/logo.png" alt="网站Logo" class="logo-icon">
        <span>武汉房产分析，助您购置优质房产</span>
      </div>
      <div v-if="authStore.user" class="user-info">
          欢迎，{{ authStore.user.username }}
        <el-button
          plain
          @click="goToProfile"
          :icon="User"
          class="logout-button"
        >
          个人中心
        </el-button>
        <el-button
          plain
          @click="logout"
          :icon="SwitchButton"
          class="logout-button"
        >
          退出
        </el-button>
      </div>
    </el-header>

    <el-main>
      <router-view />
    </el-main>
  </el-container>
</template>

<script setup>
import { useAuthStore } from '@/stores/auth'
import { useRouter } from 'vue-router'
// 导入 Element Plus 图标
import { SwitchButton ,User} from '@element-plus/icons-vue'

const authStore = useAuthStore()
const router = useRouter()

const goToProfile = () => {
  router.push('/profile');
};

const logout = () => {
  authStore.logout()
  router.push('/login')
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  padding: 0 30px; /* 增加内边距 */

  /* 方案一：渐变与阴影 */
  background: linear-gradient(135deg, #409EFF, #337ecc); /* 从亮蓝到深蓝的渐变 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 更明显的阴影 */

  /* 添加一个过渡效果，让所有变化更平滑 */
  transition: all 0.3s ease;
}

.logo {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 600; /* 使用 600 而不是 bold，字体可能更优雅 */

  /* 方案二：字体优化 */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* 柔和的文字阴影 */
  letter-spacing: 1px; /* 轻微增加字间距 */
}

/* 【核心新增】为我们自己的图标图片设置样式 */
.logo-icon {
  width: 32px;      /* 设置图标宽度 */
  height: 32px;     /* 设置图标高度 */
  margin-right: 12px; /* 设置与右侧文字的间距 */
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;

  /* 方案二：美化用户信息区 */
  background-color: rgba(255, 255, 255, 0.1);
  padding: 6px 15px;
  border-radius: 25px; /* 更圆润的“胶囊”形状 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 添加一个细微的边框 */
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.user-info:hover {
    background-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px); /* 鼠标悬停时轻微上浮 */
}

/* 优化退出按钮样式，使其与新背景更搭 */
.logout-button.el-button.is-plain {
  color: white;
  border-color: rgba(255, 255, 255, 0.5);
  background: transparent;
  transition: all 0.3s ease;
}

.logout-button.el-button.is-plain:hover,
.logout-button.el-button.is-plain:focus {
  background: white;
  color: #409EFF;
  border-color: white;
  transform: scale(1.05); /* 鼠标悬停时轻微放大 */
}
</style>